<template>
  <div>
    <!--头部导航-->
    <!-- 单页面跳转 --只有router-view跳转 -->
    <!-- <h4 v-if="isLoading">加载中...</h4> -->
    <!-- <message-index type="error" :message="error.message" v-if="error.status"></message-index> -->
    <loader-ing v-if="isLoading" text="我已经非常努力了"></loader-ing>
    <global-header :user="currentUser"></global-header>
    <!-- <uploader-file action="/upload" :beforeUpload="beforeUpload" @file-uploaded="onFileUploaded">
      <h2>点击上传</h2>
      <template #loading>
        <div class="spinner-boder" role="status">
          <span sr-only>上传中...</span>
        </div>
      </template>
   
      插槽接收参数的格式
      dataProps: {
          uploadedData: {
            type
          } }
   
      <template #uploaded="dataProps">
        <img :src="dataProps.uploadedData.data.url" alt="" width="500">
      </template>
    </uploader-file> -->
    <router-view></router-view>
    <footer class="text-center py-4 text-secondary bg-light mt-6">
      <small>
        <ul class="list-inline mb-0">
          <li class="list-inline-item">专栏</li>
          <li class="list-inline-item">文档</li>
          <li class="list-inline-item">详情</li>
          <li class="list-inline-item">地址</li>
          <li class="list-inline-item">联系</li>
        </ul>
      </small>
    </footer>

  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, watch } from "vue"
import GlobalHeader from "@/components/GlobalHeader.vue";
import { useStore } from "vuex";
import LoaderIng from "@/components/LoaderIng.vue";
import { GolbalDataProps} from "./store";
import createMessage from "./hooks/createMessage";
// import UploaderFile from "./components/UploaderFile.vue";

export default defineComponent({
  name: 'App',
  components: {
    GlobalHeader,
    LoaderIng,
    // UploaderFile
    // MessageIndex
  },
  setup() {
    const store = useStore<GolbalDataProps>()
    const currentUser = computed(() => store.state.user)
    const isLoading = computed(() => store.state.loading)
    // const token = computed(() => store.state.token)
    const error = computed(() => store.state.error)

    onMounted(() => {
      //此处 XXX（为获取的用户名，为XXX表示没有获取到用户名)
      // isLogin 为 false头部显示的为登陆和注册就算是 token值保存到本地了也没有意义
      // isLogin 为 true 头部显示的是你好XXX此时 XXX并没有获取到用户信息，前提是已经保存了token//为什么、isLogin 要取反，它的初始值为 false 在第一次登录之后值为 true但是在刷新的时候就会变回初始值

      // if (!currentUser.value.isLogin && token.value) {
      //   axios.defaults.headers.common.Authorization = `Bearer ${token.value}`
      //   store.dispatch('fetchCurrentUser')
      // }
      watch(() => error.value.status, () => {
        const { status, message } = error.value
        if (status && message) {
          createMessage(message, 'error')
        }
      })
    })

    

    // 验证上传图片格式
    // const beforeUpload = (file: File) => {
    //   // console.log(file);
    //   const isJPG = file.type === 'image/jpeg'
    //   if (!isJPG) {
    //     createMessage('上传图片只能是jpg格式', 'error')
    //   }
    //   return isJPG
    // }

    // const onFileUploaded = (rawData: ResponseType<ImagePrpos>) => {
    //   createMessage(`上传图片${rawData.data._id}`, 'success')
    // }

    return {
      currentUser,
      isLoading,
      error,
      // beforeUpload,
      // onFileUploaded
    }
  }

})
</script>

<style></style>
